<template>
  <div class="member-list">
    <!--    订单管理-订单台账-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button :type="'primary'" :loading="exportLoading" @click="handleExport">导出EXCEL</Button>
      </template>
      <template #status="{ text }">
        <Tag :color="targetStatus(text, statusList).color">
          {{ targetStatus(text, statusList).label }}
        </Tag>
      </template>
      <template #formBottomSlot>
        <Card style="margin: 16px 0; border-radius: 0">
          <div class="statistics-info flex-row-center-space">
            <div v-for="item in abstractList" :key="item.key">
              {{ item.label }}：{{ abstractInfo[item.key] || 0 }}</div
            >
          </div>
        </Card>
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { targetStatus } from '@/utils';
  import mcApi from 'mc-c2b2m-operator-api';
  import { Card, Button, Tag } from 'ant-design-vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { downloadByData } from '@/utils/file/download';
  import { BasicTable, useTable } from '@/components/Table';
  import { useTableAction } from '@/hooks/web/useTableAction';
  import { orderStatusList as statusList } from '@/enums/orderEnum';
  import { abstractList, tableColumns, tableFormSchema } from './data';

  const { OrderModule } = mcApi;
  const { OrderBookApi } = OrderModule;
  const { handleFetchDateParams } = useTableAction();

  const abstractInfo = ref<any>({});

  const [registerTable, { getForm }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: OrderBookApi.getSalesOrderParameterPage,
    scroll: { x: 3100 },
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    beforeFetch: (arg) => {
      arg.desc = 'cso.created_time';
      handleFetchDateParams(arg);
      OrderBookApi.collectSalesOrderParameterAbstract(arg).then((res: any) => {
        abstractInfo.value = res || {};
      });
    },
  });

  const exportLoading = ref<boolean>(false);
  async function handleExport() {
    try {
      exportLoading.value = true;
      const value = getForm?.()?.getFieldsValue?.();
      const data = await OrderBookApi.exportSalesOrderParameter(value);
      data &&
        downloadByData(data, new Date().getTime().toString() + '.xlsx', 'application/vnd.ms-excel');
    } finally {
      exportLoading.value = false;
    }
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
  .statistics-info {
    width: 60%;
    font-size: 16px;
    font-weight: bold;
  }
</style>
